<template>
  <header class="header">
    <section class="header-left">
      <router-link
        v-for="(item, index) in menu"
        :key="item.id"
        :to="item.path"
        @click="selectedMenu = index"
        class="link"
        ><span
          style="color: #71777c; transition: 2s"
          :class="[selectedMenu == index ? 'menu-select' : 'noselect']"
          >{{ item.text }}</span
        ></router-link
      >
    </section>
    <section class="header-center">
      <div class="search">
        <i class="iconfont icon-sousuo"></i>
        <input
          type="text"
          @keyup.enter="startSearch"
          v-model="searchContent"
          placeholder="搜索新鲜事"
        />
      </div>
    </section>
    <section class="header-right">
      <section :style="{ transform: hasLogined ? 'translateY(-60px)' : '' }">
        <section class="r-top">
          <el-button type="primary" @click="showLogin">登录/注册</el-button>
        </section>
        <section class="r-bottom">
          <el-button type="primary" @click="addPost">我有新鲜事</el-button>
          <el-dropdown>
            <span style="margin-left: 2rem">{{ userInfo.email }}</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goCenter">个人中心</el-dropdown-item>
                <el-dropdown-item @click="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </section>
      </section>
    </section>
    <login @loginSuccess="updateUserInfo"></login>
    <post-card></post-card>
  </header>
  <section style="width: 80%; margin: 7rem auto 0">
    <router-view></router-view>
  </section>
  <el-backtop :right="30" :bottom="100" />
</template>

<script setup>
import { onMounted, provide, reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import Login from "./components/Login.vue";
import PostCard from "./components/PostCard.vue";
import { useRoute, useRouter } from "vue-router";
import request from "../../utils/request";
const route = useRoute();
const router = useRouter();
const routeList = ["/recommend", "/follow", "/hot"];
let selectedMenu = ref(0);
let searchContent = ref("");
function startSearch() {
  router.push(`/search/${searchContent.value}`);
}
let openDialog = ref(false);
let loginType = ref(1); //登录
let userInfo = ref({});
let hasLogined = ref(false);
provide("openDialog", openDialog);
const showLogin = () => {
  openDialog.value = true;
};
function updateUserInfo(e) {
  console.log(e);
  userInfo.value = e;
  hasLogined.value = true;
}
function goCenter(){
  router.push('/message')
}
let openPostDialog = ref(false);
provide("openPostDialog", openPostDialog);
function addPost() {
  openPostDialog.value = true;
}
function logout() {
  localStorage.clear()
  userInfo.value = {};
  hasLogined.value = false;
}
onMounted(() => {
  let temp = JSON.parse(localStorage.getItem("userInfo"));
  if (temp) hasLogined.value = true;
  userInfo.value = temp;
  selectedMenu.value = routeList.findIndex((value) => {
    return value == route.path;
  });
});
let menu = ref([
  {
    id: "001",
    text: "推荐",
    path: "/recommend",
  },
  {
    id: "002",
    text: "关注",
    path: "/follow",
  },
  {
    id: "003",
    text: "热榜",
    path: "/hot",
  },
]);
</script>
<style >
.el-dropdown {
  vertical-align: middle;
}
</style>
<style scoped lang='less'>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  line-height: 6rem;
  background-color: #fff;
  &-left {
    display: flex;
    color: black;
    .link {
      margin-right: 3rem;
    }
  }
  &-right {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: 2s;
    section {
      height: 100%;
    }
    .r-bottom {
      color: aquamarine;
      text-align: center;
      line-height: 60px;
    }
  }
}
.search {
  width: 25rem;
  height: 4rem;
  margin: 1rem auto;
  display: flex;
  line-height: 4rem;
  .icon-sousuo {
    font-size: 18px;
  }

  & > input {
    height: 80%;
    width: 40%;
    border-radius: 20px;
    padding-left: 8%;
    padding-right: 6%;
    margin: 2px auto;
    margin-left: 5%;
    background-color: #ebecf0;
    color: #9b9b9b;
    box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;
    border: 0;
    transition: 1s;
    &:focus {
      outline: none;
      width: 80%;
      color: #333333;
      transition: 1s;
      box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;
    }
  }
}
.menu-select {
  position: relative;
  transition: 1s;
  &::after {
    position: absolute;
    content: "";
    bottom: -4px;
    left: 15%;
    height: 2px;
    width: 70%;
    background-color: #71777c;
  }
}
.noselect {
  position: relative;
  &::after {
    position: absolute;
    content: "";
    bottom: -4px;
    left: 15%;
    height: 0px;
    width: 0;
    background-color: #71777c;
  }
}
</style>